{% extends 'base.html' %}
{% block head %}
    <style>
    .col04 .order {
        display: block;
        height: 78px;
        width: 100%;
        background-color: #ff3d3d;
        text-align: center;
        line-height: 78px;
        color: #fff;
        font-size: 24px;
        border:0;
        cursor:pointer;
    }
    </style>
    <script type="text/javascript">
    function cart_del(cart_id) {
        del=confirm('确定要删除吗？');
        if(del){
            $.get('/cart/delete'+cart_id+'/',function (data) {
                if(data.ok === 1){
                    $(' ul').remove('#'+cart_id);
                    total();
                }

            })
        }
    }

    function total() {
        total1=0;
        total_count=0;
        $('.col07').each(function () {
            // 获取数量
            count=$(this).prev().find('input').val();
            // 获取单价
            price=$(this).prev().prev().text();
            // 计算小计
            total0=parseFloat(count)*parseFloat(price);
            $(this).text(total0.toFixed(2));
            total1+=total0;
            total_count++;
        });

        $('#total').text(total1.toFixed(2));
        $('.total_count1').text(total_count);
    }

    $(function () {
        total();

        // 全选 全部消除
        $('#check_all').click(function () {
            state = $(this).prop('checked');
            $(':checkbox:not(#check_all)').prop('checked',state);
        });

        // 选择
        $(':checkbox:not(#check_all)').click(function () {
            if($(this).prop('checked')){
                if($(':checked').length+1===$(':checkbox').length) {
                    $('#check_all').prop('checked',true);
                }
            }else{
                $('#check_all').prop('checked',false);
            }
        });

        // 数量+
        $('.add').click(function () {
            txt =$(this).next();
            txt.val(parseFloat(txt.val())+1).blur();
        });

        // 数量-
        $('.minus').click(function () {
            txt =$(this).prev();
            txt.val(parseFloat(txt.val())-1).blur();
        });

        // 手动改数量
        $('.num_show').blur(function () {
            count=$(this).val();
            if(count<=0) {
                $(this).val(1).focus();
                return;
            }else if(count>=100){
                $(this).val(99).focus();
                return ;
            }
            cart_id=$(this).parents('.cart_list_td').attr('id');
            $.get('/cart/edit'+cart_id+'_'+count+'/',function (data) {
                if(data.ok===0){ // 修改成功
                    total();
                }else{// 修改失败，显示为原来的数量
                    $(this).val(data.ok);
                }

            })
        });
    })
    </script>
{% endblock head%}
{% block content %}
	<div class="total_count">全部商品<em>{{ carts.count }}</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
<form action="/order/" method="get">
{% csrf_token %}
{% for cart in carts %}
	<ul class="cart_list_td clearfix" id="{{ cart.id }}">

		<li class="col01"><input type="checkbox" name="order_id" checked="checked" value="{{ cart.id }}"></li>
		<li class="col02"><img src="/static/{{ cart.goods.gpic }}"></li>
		<li class="col03">{{ cart.goods.gtitle }}<br><em>{{ cart.goods.gprice }}/{{ cart.goods.gunit }}</em></li>
		<li class="col04">{{ cart.goods.gunit }}</li>
		<li class="col05">{{ cart.goods.gprice }}</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl">+</a>
				<input type="text" class="num_show fl" value="{{ cart.count }}">
				<a href="javascript:;" class="minus fl">-</a>
			</div>
		</li>
		<li class="col07"></li>
		<li class="col08"><a href="javascript:cart_del({{ cart.id }});">删除</a></li>

	</ul>
{% endfor %}

	<ul class="settlements">
		<li class="col01"><input id="check_all" type="checkbox" checked="checked" ></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span>
            <em id="total">0</em>
            <br>共计<b class="total_count1">0</b>件商品</li>
        <li class="col04"><input class="order" name="" type="submit" value="去结算"/></li>
	</ul>
</form>
{% endblock content %}